<template>
<div>
        ShowInfo:{{ name }}
        -{{ age }}

        <button @click="btnClick">x修改</button>
</div>
</template>
<script setup>
import { reactive ,ref,defineProps} from 'vue'
// 定义props
const props = defineProps({
    name:{
     type:String,
     default:"默认"
    },
    age:{
        type:Number,
        default:0
    }
})
// 绑定函数，发出事件
const emits = defineEmits(["btnClick"])
const btnClick =()=>{
emits('btnClick',"sh0winfo内发生了点击")
}
function foo(){
    console.log('foo function');
}
// 使用<script setup>的组件是默认关闭的:
// 口通过模板 ref 或者 Sparent 链获取到的组件的公开实例，不会暴露任何在 <script setup>中声明的绑定通过 defineExpose 编译器宏来显式指定在<script setup>组件中要暴露出去的 property:
defineExpose({
    foo
})
</script>
<style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
</style>